<template>
    <view class="kf-fixed" v-if="showModel">
        <view class="kf-model">
            <view class="kf-pic dir-top-nowrap">
                <view class="box-grow-0" style="height: 58rpx"></view>
                <view class="box-grow-1" :style="[themeStyle]" style="border-radius:16rpx 16rpx 0 0"></view>
                <image class="kf-pic dir-top-nowrap"
                       :src="appImg.summary_kf_head"
                       style="position:absolute">
                </image>
            </view>
            <view style="background-color: white;border-radius:0 0 16rpx 16rpx;padding-bottom: 20rpx">
                <view class="kf-remake">我们将会全心全意为您提供满意周到的咨询服务，感谢您的支持！</view>
                <view v-if="infoData.is_customer_wechat == 1"
                      class="kf-btn main-center cross-center"
                      :style="[themeStyle]"
                      @click="copyWechat"
                >
                    {{ infoData.customer_wechat_place }}
                </view>
                <view v-if="infoData.is_customer_phone == 1"
                      class="kf-btn kf-btn-b main-center cross-center"
                      @click="callPhone"
                      :style="{borderColor: getTheme.color,color: getTheme.color}"
                >
                    {{ infoData.customer_phone_place }}
                </view>
                <view v-if="infoData.is_web_service == 1 && mchData.is_web_service"
                      class="kf-btn end main-center cross-center"
                      @click="jumpKf"
                      :style="{color:getTheme.color}"
                >
                    {{ infoData.web_server_place }}
                </view>
            </view>
        </view>
        <view class="kf-close" @click="close">
            <image :src="appImg.summary_kf_close"></image>
        </view>
    </view>
</template>

<script>
import {mapGetters, mapState} from "vuex";

export default {
    name: "mch-customer",
    props: {
        value: Boolean,
        mchData: Object,
        infoData: Object,
    },
    data() {
        return {
            showModel: this.value,
        }
    },
    watch: {
        value(newValue) {
            this.showModel = newValue;
        }
    },
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
        ...mapState({
            appImg: state => state.mallConfig.plugin.mch.app_image,
        }),
        themeStyle() {
            let color = this.getTheme.color;
            if (color) {
                return {
                    backgroundImage: `linear-gradient(to right,${color}, ${this.$utils.colorRgba(color, 0.7)})`
                }
            }
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        copyWechat() {
            this.$utils.uniCopy({
                data: this.mchData.wechat,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none',
                    })
                }
            });
        },
        callPhone() {
            uni.makePhoneCall({phoneNumber: this.mchData.service_mobile});
        },
        jumpKf() {
            uni.navigateTo({url: `/pages/web/web?url=` +  encodeURIComponent(this.mchData.web_service_url)});
        }
    }
}
</script>
<style scoped lang="scss">
.kf-fixed {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);

    .kf-model {
        margin: 264#{rpx} auto 0;
        width: 560#{rpx};
        .kf-pic {
            position: relative;
            top: 0;
            height: 265#{rpx};
            width: 100%;
        }

        .kf-remake {
            font-size: 28#{rpx};
            color: #999999;
            overflow: hidden;
            padding: 40#{rpx} 40#{rpx} 20#{rpx};
        }

        .kf-btn {
            width: 480#{rpx};
            height: 64#{rpx};
            font-size: 28#{rpx};


            border-radius: 32#{rpx};
            margin: 20#{rpx} auto 0;
            color: #FFFFFF;
        }
        .kf-btn:last-child{

        }
        .kf-btn.kf-btn-b {
            border-width: 1px;
            border-style: solid
        }

        .kf-btn.end {
            background-color: white;
            width: auto;
            height: auto;
            margin-bottom: 0;

        }
    }

    .kf-close {
        height: #{64rpx};
        width: #{64rpx};
        margin: 60#{rpx} auto 0;

        image {
            height: 100%;
            width: 100%;
            display: block;
        }
    }
}
</style>